<template>
  <Splitpanes
    class="default-theme"
    v-bind="sx_mark([name,'Splitpanes'])"
    horizontal
    @resized="handleTableHeight"
  >
    <Pane :size="70">
      <!-- 搜索 -->
      <SxFilterSearch
        v-bind="sx_mark([name,'search'])"
        :form-fields="search.list"
        :select-options-list="selectOptionsList"
        @search="handleSearch"
        @reset="handleResetSearch"
      />
      <!-- 表格 -->
      <SxTable
        row-id="_XID"
        v-bind="sx_mark([name,'table'])"
        :button-list="buttonGroup"
        :highlight-current-row="false"
        :height="config.height"
        :tool-width="200"
        :tool-permission="toolPermission"
        :columns="config.tableData.columns"
        :table-params="search.params"
        :request-method="actgetDefinitions"
        :loading="config.loading"
        tool-fixed="right"
        :selection-type="null"
      >
        <template v-slot:tool="scope">
          <div class="tool_handle">
            <el-button
              plain
              :size="$store.getters.size"
              class="scale_9"
              type="primary"
              @click="handleEdit(scope)"
            >发起审批</el-button>
          </div>
        </template>
      </SxTable>

      <!-- 弹窗 -->
      <SxDialog
        :title="storeDialog.title"
        :width="storeDialog.width"
        :min-height="storeDialog.height"
        :visible="storeDialog.visible"
        @dialog-close="handleAddCancel"
        @dialog-cancel="handleAddCancel"
        @dialog-confirm="handleAddConfirm"
      >
        <div class="VFormRender">
          <VFormRender
            v-bind="sx_mark([name,'VFormRender'])"
            :form-json="VFormRender.formJson"
            :form-data="VFormRender.formData"
            :preview-state="true"
            :option-data="VFormRender.optionData"
            @appendButtonClick="onAppendButtonClick"
            @buttonClick="onButtonClick"
            @formChange="handleFormChange"
          ></VFormRender>
        </div>
      </SxDialog>
    </Pane>
    <Pane :size="30">
      <el-tabs type="border-card">
        <el-tab-pane label="发起明细">
          <!-- <materialsDetails v-bind="sx_mark([name,'details'])" :selectType="null"></materialsDetails> -->
        </el-tab-pane>
      </el-tabs>
    </Pane>
  </Splitpanes>
</template>

<script>
import {
  actgetDefinitions,
  actreadResource,
  actTaskControllerstart
} from "@/api/api";
import VFormRender from "@Form/components/form-render/index";
import SxTable from "@Components/Table";
import SxDialog from "@Components/Dialog";
import SxTabs from "@Components/Tabs";
import SxFilterSearch from "@Components/Search";
import SxButtonGroup from "@Components/ButtonGroup";
import SxForm from "@Components/Form";
import config from "./config.js";
import { GetXMLNodeProperty } from "@/utils";
import throttleResize from "@Components/assets/js/utils/throttleResize";
export default {
  props: {
    height: {
      type: String,
      default: null
    }
  },
  mixins: [throttleResize],
  components: {
    SxFilterSearch,
    SxTable,
    SxDialog,
    SxTabs,
    SxForm,
    SxButtonGroup,
    VFormRender
  },
  data() {
    return {
      ...config.call(this)
    };
  },
  methods: {
    actgetDefinitions,
    onAppendButtonClick(clickedWidget) {
      console.log("onAppendButtonClick", clickedWidget);
    },
    onButtonClick(button) {
      console.log("onButtonClick", button);
    },
    handleFormChange(fieldName, newValue, oldValue, formModel) {
      console.log("---formChange start---");
      console.log("fieldName", fieldName);
      console.log("newValue", newValue);
      console.log("oldValue", oldValue);
      console.log("formModel", formModel);
      console.log("---formChange end---");
    },
    // 搜索事件
    handleSearch(data) {
      this.search.params = { ...this.search.params, ...data };
      this.$refs[`${this.name}_table`].refreshTable();
    },
    // 重置搜索
    handleResetSearch(data) {
      this.$refs[`${this.name}_table`]._clearFilter();
      this.handleSearch(data);
    },
    // 开启弹窗
    handleStoreDialog(name = null) {
      this.storeDialog.title = name || "新增";
      this.storeDialog.visible = true;
    },
    // 关闭弹窗
    handleAddCancel() {
      this.storeDialog.visible = false;
      this.storeDialog.formData = {};
    },
    // 发起审批
    async handleEdit(scope) {
      let res = await actreadResource({
        pdid: scope.row.deploymentId,
        resourceName: scope.row.resourceName
      });
      this.VFormRender.formJson = {
        formConfig: {
          cssCode: "",
          customClass: "",
          functions: "",
          labelAlign: "label-left-align",
          labelPosition: "left",
          labelWidth: 80,
          layoutType: "PC",
          modelName: "formData",
          onFormCreated: "",
          onFormDataChange: "",
          onFormMounted: "",
          refName: "vForm",
          rulesName: "rules",
          size: ""
        },
        widgetList: GetXMLNodeProperty(res)
      };
      this.bpmnRow = scope.row;
      this.handleStoreDialog(scope.row.name);
    },
    async handleAddConfirm() {
      try {
        const formData = await this.$refs[
          `${this.name}_VFormRender`
        ].getFormData();
        let formDataParam = [];
        Object.keys(formData).forEach(i => {
          formDataParam.push({
            label: i,
            value: formData[i]
          });
        });
        let params = {
          id: this.bpmnRow.key,
          formData: formDataParam
        };
        let { msg } = await actTaskControllerstart(params);
        this.$showMessage({ type: "success", message: msg });
        this.handleAddCancel();
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.default-theme {
  position: absolute;
}
/deep/ .el-tabs {
  height: 100%;
}
/deep/ .el-tabs__content {
  height: calc(100% - 60px) !important;
  padding: 10px 0 0 0 !important;
}
/deep/ .el-tab-pane {
  height: 100% !important;
}
.sx-new-table {
  height: 100%;
}
/deep/.production-modules-form {
  width: 90%;
  margin: 0 5%;
}
.VFormRender {
  width: 95%;
  padding: 2.5%;
}
</style>
